import { useState, useEffect } from 'react';
import { autorun } from 'mobx';

import { cinemaStore } from '../mobx/store';

const useCinemaList = (cityId) => {
  const [list, setList] = useState([]);

  useEffect(() => {
    if (cinemaStore.list.length === 0) {
      cinemaStore.fetchList(cityId);
    } else {
      console.log('useCinema 缓存');
    }
    return () => {};
  }, [cityId]);

  useEffect(() => {
    // 监听
    let unsubscribe = autorun(() => {
      setList(cinemaStore.list);
    });
    return () => {
      // 取消监听
      unsubscribe();
    };
  }, []);
  return {
    list,
  };
};

export { useCinemaList };
